<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI选股 - 设置价格提醒</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="styles.css">
    <style>
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.5);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1000;
        }
        
        .modal-container {
            background-color: white;
            border-radius: 12px;
            width: 90%;
            max-width: 400px;
            max-height: 90vh;
            overflow-y: auto;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }
        
        .modal-header {
            padding: 15px;
            border-bottom: 1px solid #ebedf0;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .modal-body {
            padding: 15px;
        }
        
        .modal-footer {
            padding: 15px;
            border-top: 1px solid #ebedf0;
            display: flex;
            justify-content: space-between;
        }
    </style>
</head>
<body>
    <div class="app-container">
        <!-- 导航栏 -->
        <div class="navbar">
            <div class="navbar-btn">
                <i class="fas fa-arrow-left"></i>
            </div>
            <div class="navbar-title">设置价格提醒</div>
            <div class="navbar-btn invisible">
                <i class="fas fa-ellipsis-v"></i>
            </div>
        </div>

        <!-- 主内容区域 -->
        <div class="content p-4">
            <!-- 股票信息 -->
            <div class="bg-blue-50 rounded-lg p-3 mb-5">
                <div class="flex justify-between items-center">
                    <div>
                        <div class="font-medium">腾讯控股</div>
                        <div class="text-xs text-gray-500">00700.HK</div>
                    </div>
                    <div class="text-right">
                        <div class="font-medium">388.60</div>
                        <div class="text-xs text-red-500">+8.40 (+2.21%)</div>
                    </div>
                </div>
            </div>

            <!-- 提醒设置表单 -->
            <div class="space-y-4">
                <div>
                    <label class="form-label">价格高于</label>
                    <div class="flex items-center">
                        <input type="number" step="0.01" class="form-input" placeholder="请输入价格" value="400.00">
                        <span class="ml-2 text-gray-500">元</span>
                    </div>
                    <div class="mt-1 text-xs text-gray-500">
                        <i class="fas fa-info-circle mr-1"></i> 当股价高于此价格时提醒
                    </div>
                </div>
                
                <div class="flex items-center justify-between">
                    <label class="form-label mb-0">启用</label>
                    <div class="relative inline-block w-10 align-middle select-none">
                        <input type="checkbox" name="price_high_alert" id="price_high_alert" class="hidden" checked />
                        <label for="price_high_alert" class="block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer">
                            <span class="block h-6 w-6 rounded-full bg-white transform translate-x-4 transition-transform duration-200 ease-in-out"></span>
                        </label>
                    </div>
                </div>
                
                <div class="border-t border-gray-200 my-4 pt-4">
                    <label class="form-label">价格低于</label>
                    <div class="flex items-center">
                        <input type="number" step="0.01" class="form-input" placeholder="请输入价格" value="370.00">
                        <span class="ml-2 text-gray-500">元</span>
                    </div>
                    <div class="mt-1 text-xs text-gray-500">
                        <i class="fas fa-info-circle mr-1"></i> 当股价低于此价格时提醒
                    </div>
                </div>
                
                <div class="flex items-center justify-between">
                    <label class="form-label mb-0">启用</label>
                    <div class="relative inline-block w-10 align-middle select-none">
                        <input type="checkbox" name="price_low_alert" id="price_low_alert" class="hidden" checked />
                        <label for="price_low_alert" class="block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer">
                            <span class="block h-6 w-6 rounded-full bg-white transform translate-x-4 transition-transform duration-200 ease-in-out"></span>
                        </label>
                    </div>
                </div>
                
                <div class="border-t border-gray-200 my-4 pt-4">
                    <label class="form-label">涨跌幅超过</label>
                    <div class="flex items-center">
                        <input type="number" step="0.1" class="form-input" placeholder="请输入百分比" value="5.0">
                        <span class="ml-2 text-gray-500">%</span>
                    </div>
                    <div class="mt-1 text-xs text-gray-500">
                        <i class="fas fa-info-circle mr-1"></i> 当日内涨跌幅超过此百分比时提醒
                    </div>
                </div>
                
                <div class="flex items-center justify-between">
                    <label class="form-label mb-0">启用</label>
                    <div class="relative inline-block w-10 align-middle select-none">
                        <input type="checkbox" name="change_alert" id="change_alert" class="hidden" />
                        <label for="change_alert" class="block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer">
                            <span class="block h-6 w-6 rounded-full bg-white transition-transform duration-200 ease-in-out"></span>
                        </label>
                    </div>
                </div>
            </div>
        </div>

        <!-- 底部按钮 -->
        <div class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 p-4 flex justify-between">
            <button class="w-1/3 py-2 border border-gray-300 rounded-lg text-gray-700">取消</button>
            <button class="w-2/3 ml-3 py-2 bg-blue-500 text-white rounded-lg font-medium">保存提醒设置</button>
        </div>

        <!-- 底部标签栏 -->
        <div class="tabbar">
            <div class="tab-item">
                <i class="fas fa-home"></i>
                <span>首页</span>
            </div>
            <div class="tab-item">
                <i class="fas fa-chart-line"></i>
                <span>每日推荐</span>
            </div>
            <div class="tab-item">
                <i class="fas fa-list-ul"></i>
                <span>自选</span>
            </div>
            <div class="tab-item active">
                <i class="fas fa-user"></i>
                <span>我的</span>
            </div>
        </div>
    </div>

    <!-- 弹窗示例 -->
    <div class="modal-overlay">
        <div class="modal-container">
            <div class="modal-header">
                <h3 class="text-lg font-medium">设置价格提醒</h3>
                <button class="text-gray-400">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="modal-body">
                <!-- 股票信息 -->
                <div class="mb-4 p-3 bg-blue-50 rounded-lg">
                    <div class="flex justify-between items-center">
                        <div>
                            <div class="font-medium">腾讯控股</div>
                            <div class="text-xs text-gray-500">00700.HK</div>
                        </div>
                        <div class="text-right">
                            <div class="font-medium">388.60</div>
                            <div class="text-xs text-red-500">+2.21%</div>
                        </div>
                    </div>
                </div>
                
                <!-- 提醒表单 -->
                <div class="space-y-4">
                    <div class="flex items-center justify-between">
                        <div>
                            <label class="form-label">价格高于</label>
                            <div class="flex items-center">
                                <input type="number" step="0.01" class="form-input" value="400.00" style="width: 100px">
                                <span class="ml-1 text-gray-500">元</span>
                            </div>
                        </div>
                        <div class="relative inline-block w-10 align-middle select-none">
                            <input type="checkbox" name="modal_high_alert" id="modal_high_alert" class="hidden" checked />
                            <label for="modal_high_alert" class="block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer">
                                <span class="block h-6 w-6 rounded-full bg-white transform translate-x-4 transition-transform duration-200 ease-in-out"></span>
                            </label>
                        </div>
                    </div>
                    
                    <div class="flex items-center justify-between">
                        <div>
                            <label class="form-label">价格低于</label>
                            <div class="flex items-center">
                                <input type="number" step="0.01" class="form-input" value="370.00" style="width: 100px">
                                <span class="ml-1 text-gray-500">元</span>
                            </div>
                        </div>
                        <div class="relative inline-block w-10 align-middle select-none">
                            <input type="checkbox" name="modal_low_alert" id="modal_low_alert" class="hidden" checked />
                            <label for="modal_low_alert" class="block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer">
                                <span class="block h-6 w-6 rounded-full bg-white transform translate-x-4 transition-transform duration-200 ease-in-out"></span>
                            </label>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700">取消</button>
                <button class="px-4 py-2 bg-blue-500 text-white rounded-lg font-medium">确认</button>
            </div>
        </div>
    </div>
</body>
</html> 